<template>
   <div>
       <!-- 搜索 -->
        <div class="search">
            <div class="searchItem">
                <icon type="search"></icon>
                <span>搜索</span>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="swiper">
            <swiper indicator-dots>
                <swiper-item v-for="(item,index) in swiperData" :key="index">
                    <image :src="item.image_src"></image>
                </swiper-item>
            </swiper>
        </div>
        <!-- 菜单 -->
        <div class="menu">
            <div class="menu-item" v-for="(item,index) in menuData" :key="index">
                <image :src="item.image_src"></image>
            </div>
        </div>
   </div>
</template>

<script>
import request from "../../utils/request.js"
export default {
    data() {
        return {
            swiperData:[],
            menuData:[]
        }
    },
    created() {
        // 1.
        // mpvue是wx的别名
    //   mpvue.request({
    //       url:'https://www.ehomespace.com/api/public/v1/home/swiperdata',
    //       methods:'get',
    //       success:(res)=>{
    //           this.swiperData = res.data.message
    //       }
    //   })
    //   mpvue.request({
    //         url:'https://www.ehomespace.com/api/public/v1/home/catitems',
    //         methods:'get',
    //         success:(res)=>{
    //         this.menuData = res.data.message
    //       }
    //   })
    // 2.
        // request('home/swiperdata').then(res=>{
        //     this.swiperData = res.data.message
        // })
        // request('home/catitems').then(res=>{
        //     this.menuData = res.data.message
        // })
        this.initData()
    },
    // 3.
    methods: {
      async initData(){
        let swiperRes = await request('home/swiperdata')
        this.swiperData = swiperRes.data.message
        let menuRes = await request('home/catitems')
        this.menuData = menuRes.data.message
      }
    },
}
</script>

<style  scoped>
.search{
    padding:15rpx;
    background-color: #FF2D4A;
}
.searchItem{
    background-color: #fff;
    text-align: center;
}
.searchItem icon{
    vertical-align: middle;
}
.swiper swiper image{
    width:750rpx;
}
.menu {
    display: flex;
    margin-top:20rpx;
}
.menu-item image{
    flex:1;
    height:200rpx;
    width:190rpx;
}

</style>
